<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<meta charset="utf-8" name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>维修履历</title>
	<link rel="stylesheet" href="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrap/dist/css/bootstrap.min.css">
	<link href="http://carowner.yonyouauto.com/fs01/ase/v1/components/mobisscroll/css/mobiscroll.custom-3.0.0-beta2.min.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrapValidator/css/bootstrapValidator.css" type="text/css" />
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/jquery2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/common/py.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/mobisscroll/js/mobiscroll.custom-3.0.0-beta2.min.js" type="text/javascript"></script>

	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/hammer/hammer.min.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/hammer/jquery.hammer.js"></script>
	<script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/vue/vue.min.js"></script>
	<script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrapValidator/js/bootstrapValidator.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/common/common.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/Gmccui.js"></script>

	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/common/wechatCommon.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6WLRtwjdIPrXW5FaNIsgdZG038pLb84Z"></script>
	<style> 
	[v-cloak] {
	  display: none;
	}
a{ text-decoration:none;color:#000;}
.product-head h1{font-size: 14px;font-family: Arial, Helvetica, sans-serif;margin-bottom: 3px;margin-left: 3px;}
.product-head{font-size: 12px;padding: 4px;background-color: #ccc;width: 235px;}
.filterform input{font-size: 15px;padding: 3px;border: 1px solid #999;}
li{padding: 0;margin: 3px;list-style: none;width: 100%;}
li a{color: #000;font-family: Arial, Helvetica, sans-serif;font-size: 11px}
ul{margin: 0;padding: 0;}
.clear{clear: both;}
body{background-color:rgb(243,243,243);}
.top-banner{
	width:100%;
	/*height:100px;*/
	background-color:#fff;
	padding: 15px 0px 10px 0;
}

.wd-75{
	width:75%;
	max-width: 180px;
	}

.text-right{
	text-align:right;
}

/* time line */
#cd-timeline {
	position: relative;
	padding: 2em 0;
	margin-top: 2em;
	margin-bottom: 2em;
}
#cd-timeline::before {
	/* this is the vertical line */
	content: '';
	position: absolute;
	top: 28px;
	left: 18px;
	height: 90%;
	width: 2px;
	background: rgb(249, 118, 132);
}
@media only screen and (min-width: 1170px) {
	#cd-timeline {
		margin-top: 3em;
		margin-bottom: 3em;
	}
	#cd-timeline::before {
		left: 50%;
		margin-left: -2px;
	}
}

.cd-timeline-block {
	position: relative;
	margin: 2em 0;
}
.cd-timeline-block:after {
	content: "";
	display: table;
	clear: both;
}
.cd-timeline-block:first-child {
	margin-top: 0;
}
.cd-timeline-block:last-child {
	margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
	.cd-timeline-block {
		margin: 4em 0;
	}
	.cd-timeline-block:first-child {
		margin-top: 0;
	}
	.cd-timeline-block:last-child {
		margin-bottom: 0;
	}
}

.cd-timeline-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 37px;
	height: 24px;
}
.cd-timeline-img img {
	display: block;
	width: 24px;
	height: 24px;
	position: relative;
	left: 50%;
	top: 50%;
	margin-left: -12px;
	margin-top: -12px;
}
.cd-timeline-img.cd-picture {
	background: #f3f3f3;
}
.cd-timeline-img.cd-location {
	background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
	.cd-timeline-img {
		width: 60px;
		height: 60px;
		left: 50%;
		margin-left: -30px;
		/* Force Hardware Acceleration in WebKit */
		-webkit-transform: translateZ(0);
		-webkit-backface-visibility: hidden;
	}
	.cssanimations .cd-timeline-img.is-hidden {
		visibility: hidden;
	}
	.cssanimations .cd-timeline-img.bounce-in {
		visibility: visible;
		-webkit-animation: cd-bounce-1 0.6s;
		-moz-animation: cd-bounce-1 0.6s;
		animation: cd-bounce-1 0.6s;
	}
}

.cd-timeline-content {
	position: relative;
	margin-left: 36px;
	padding: .2em;
	margin-right: 15px;
}
.cd-timeline-content:after {
	content: "";
	display: table;
	clear: both;
}
.cd-timeline-content h2 {
	color: #303e49;
}
.cd-timeline-content p,.cd-timeline-content .cd-date {
	font-size: 13px;
	font-size: 0.8125rem;
}
 .cd-timeline-content .cd-date {
	display: inline-block;
}
.cd-timeline-content p {
	margin: 1em 0;
	line-height: 1.6;
}

.cd-timeline-content .cd-date {
	float: left;
	padding: .8em 0;
	opacity: .7;
}
@media only screen and (min-width: 768px) {
	.cd-timeline-content h2 {
		font-size: 20px;
		font-size: 1.25rem;
	}
	.cd-timeline-content p {
		font-size: 16px;
		font-size: 1rem;
	}
}
@media only screen and (min-width: 1170px) {
	.cd-timeline-content {
		margin-left: 0;
		padding: 1.6em;
		width: 45%;
	}
	.cd-timeline-content .cd-date {
		position: absolute;
		width: 100%;
		left: 122%;
		top: 6px;
		font-size: 16px;
		font-size: 1rem;
	}
	.cd-timeline-block:nth-child(even) .cd-timeline-content {
		float: right;
	}
	.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
		left: auto;
		right: 122%;
		text-align: right;
	}
	.cssanimations .cd-timeline-content.is-hidden {
		visibility: hidden;
	}
	.cssanimations .cd-timeline-content.bounce-in {
		visibility: visible;
		-webkit-animation: cd-bounce-2 0.6s;
		-moz-animation: cd-bounce-2 0.6s;
		animation: cd-bounce-2 0.6s;
	}
}

@media only screen and (min-width: 1170px) {
	/* inverse bounce effect on even content blocks */
	.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
		-webkit-animation: cd-bounce-2-inverse 0.6s;
		-moz-animation: cd-bounce-2-inverse 0.6s;
		animation: cd-bounce-2-inverse 0.6s;
	}
}
.content-title{
	margin-bottom:10px;
}
.content-inner{
	width:100%;
	/*min-height:120px;*/
	background-color:#fff;
	border-radius: 5px;
}

.inner-header{
	padding: 10px 5px;
    background-color: rgb(251,76,95);
    font-size:12px;
    color:#fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.inner-header.grey{
	background-color:rgb(181,181,181);
}

.inner-content{
	padding: 20px 0px 15px 10px;
	font-size:12px;
}

.btn.btn-red{
	color:rgb(251,76,95);
	border:1px solid rgb(251,76,95);
}

.btn.btn-block-grey{
	background-color:rgb(181,181,181);
	color:#fff;
}

/* 维修明细 */
#rhdcontent{
 	position: absolute;
 	width: 100%;
	height: 100%;
	padding:15px;
	color:#777;
    background-color: #fff;
    overflow:auto;
        font-size: 12px;
   
}

#rhrcontent{
	position: absolute;
	width: 100%;
	height: 100%;
	color:#777;
    background-color: #fff;
}

.drivider-line-1{
	height:1px;
	display:inline-block;
	width:100%;
	background-color:#ddd;
	margin:0 0 5px;
	
}
.drivider-line-10{
	height:10px;
	display:inline-block;
	width:100%;
	background-color:#ddd;
	margin:5px 0 5px;
	
}

.border-line-1{
	width:100%;
	display:inline-block;
	border:1px solid #ddd;
	min-height:100px;
	padding:5px;
	border-radius: 2px;
}

.line-h-30{
	line-height:30px;
	font-size:14px;
}

.fs-16{
	font-size:14px;
}

.font-red,.font-red *{
	color:#ea0707;
	font-size:16px
}

.content-inner{
	padding: 0;
}
.tab-content  .press{
	float: right;
	color:red;
	width: 4.5rem;
	height:2rem;
	line-height:2rem;
	text-align: center;
	margin-right: 1.5rem;
	border:1px solid red;
}
.tab-content .press a{
	color:red;
	text-decoration: blink;
}
.tab-content  .pressed {
	float: right;
	color:grey;
	width: 4.5rem;
	height:2rem;
	line-height:2rem;
	text-align: center;
	margin-right: 1.5rem;
	border:1px solid grey;
}
.tab-content .pressed a{
	color:grey;
	text-decoration: blink;
}

</style>
</head>
<body>
<div id="rhApp" v-cloak>
	<div id="rhContent" class="tab-content" style="overflow-x:hidden;">
		<img id="firstImg" src="http://carowner.yonyouauto.com/fs01/ase/v1/images/GQ/d7.png" style="width:100%;">
		<div  id="maintainMainDiv" class="container formValidate tab-pane fade" 
				data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
				data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
				data-bv-feedbackicons-validating="glyphicon glyphicon-refresh"></div>

		<!-- top banner start -->
		<div class="top-banner">
			<div class="row" v-for="item in carInfo">
					<div class="col-xs-6 text-right">
						<img class="img-rounded wd-75" v-bind:src="item['imgurl']"></div>
					<div class="col-xs-6" style='padding-left: 35px;'>
						<p style='margin:0;'>{{item.modelName}}</p>
						<p>{{item.licenseNo}}</p>
					</div>
			</div>
			<div class="row" v-if="carInfo.length == 0">
				<div class="col-xs-12" >
					<p>暂无车辆信息</p>
				</div>
			</div>
		</div>
		<!-- top banner end -->

		<!-- time line start -->
		<div class="time-line" v-if="items.length > 0">
			<section id="cd-timeline" class="cd-container" >
				<div class="cd-timeline-block" v-for="(item, index) in items">
					<div class="cd-timeline-img cd-picture">
						<img src="http://carowner.yonyouauto.com/fs01/ase/v1/images/clock.png"></div>

					<div class="cd-timeline-content">
						<div class="content-title">
							<!-- <span v-text="item['createDate']"></span>
						-->
						<span  style='font-size: 16px;' v-show="item.actualCompleteDate != null">{{item.actualCompleteDate}}&nbsp;-&nbsp;{{"星期"+getMyDay(new Date(item.actualCompleteDate))}}</span>
					</div>
					<div class="content-inner">
						<div class="inner-header" @click="Gmccui.pageSwitch('#rhContent','#rhdcontent',rhdPageFn(item))">
							<!-- v-on:click="Gmccui.pageSwitch('#rhContent','#rhdcontent',rhdPageFn(item))" -->
							<div class="row">
								<div class="col-xs-1"> <i class="glyphicon glyphicon-tags"></i>
								</div>
								<div class="col-xs-8">
									<!-- <span v-text="item['maintenanceWorkOrderType']"></span>
								-->
								<span>{{item.repairStatus == null?'定期保养':item.repairStatus}}</span>
							</div>
							<div style='padding-right: 0;' class="col-xs-2 text-right"> <i class="glyphicon glyphicon-menu-right"></i>
							</div>
						</div>
					</div>
					<div class="inner-content">
						<div class="row">
							<div class="col-xs-12">
								<!-- <span v-text="item['dealerName']"></span>
							-->
							<span>{{item.dealerName}}</span>
								<span class="press" v-if="item.ifEvaluation==0" @click="press(item.maintenanceWorkOrderNum,item.dealerCode)"><a href="./modules/evaluate.html#/">评价</a></span>
							<span class="pressed" v-if="item.ifEvaluation==1" @click="press(item.maintenanceWorkOrderNum,item.dealerCode)"><a href="./modules/evaluate.html#/assess">已评价</a></span>
						</div>
						<!-- <div class="col-xs-3 text-right">
						<a class="btn btn-default btn-sm btn-red col-xs-12">评价</a>
					</div>
					-->
				</div>
			</section>
		</div>
		<div class="row"  style='padding: 30px;' v-if="items.length == 0">
			<div class="col-xs-12">
				<p class="text-center">暂无维修履历</p>
			</div>
		</div>
		<!-- time line end -->
	</div>
		
	<!-- 维修明细 -->
	<div id="rhdcontent" class="tab-pane hidden">
		<div class="row font-red">
			<div class="col-xs-4">工单号</div>
			<div class="col-xs-8">
				<span>{{details.maintenanceWorkOrderNum}}</span>
			</div>
			<div class="col-xs-12">
				<p class="drivider-line-1"></p>
			</div>
		</div>
		<div class="row line-h-30">
			<div class="col-xs-4">进店时间</div>
			<div class="col-xs-8">{{details.entryTime}}</div>
		</div>
		<div class="row line-h-30">
			<div class="col-xs-4">里程</div>
			<div class="col-xs-8">{{details.inMile == null? 0:details.inMile}}KM</div>
		</div>
		<div class="row line-h-30">
			<div class="col-xs-4">销售服务店</div>
			<div class="col-xs-8">{{details.dealerName}}</div>
		</div>
		<div class="row line-h-30">
			<div class="col-xs-4">预计交车时间</div>
			<div class="col-xs-8">{{details.expectedTime}}</div>
		</div>
		<div class="row line-h-30">
			<div class="col-xs-4">交车时间</div>
			<div class="col-xs-8">{{details.completionDate}}</div>
		</div>
		<div class="row line-h-30">
			<div class="col-xs-4 fs-16">维修状态</div>
			<div class="col-xs-8 text-right">{{details.repairStatus}}</div>
		</div>
		<div class="row line-h-30">
			<!-- <div class="col-xs-12">
				<p class="drivider-line-1"></p>
			</div> -->
			<div class="col-xs-4 fs-16">维修类型</div>
			<div class="col-xs-8 text-right">{{details.maintenanceWorkOrderType}}</div>
		</div>
		<!-- <div class="row line-h-30">
			<div class="col-xs-12" style='padding: 0;'>
				<p class="drivider-line-10"></p>
			</div>
			<div class="col-xs-12 fs-16">项目信息</div>
			<div class="col-xs-12">
				<span class="pull-left">{{details.projectInfo}}</span>
			</div>
		</div>
		<div class="row line-h-30">
			<div class="col-xs-12">
				<p class="drivider-line-1"></p>
			</div>
			<div class="col-xs-12 fs-16">零件信息</div>
			<div class="col-xs-12">
				<span class="pull-left">{{details.partInfo}}</span>
			</div>
		</div> -->
		<div class="row line-h-30">
			<div class="col-xs-12" style='padding: 0;'>
				<p class="drivider-line-10"></p>
			</div>
			<div class="col-xs-12 fs-16">项目信息</div>
			<div class="col-xs-12">
				<p class="border-line-1">{{details.projectInfo}}</p>
			</div>
		</div>
		<div class="row line-h-30">
			<div class="col-xs-12" style='padding: 0;'>
				<p class="drivider-line-10"></p>
			</div>
			<div class="col-xs-12 fs-16">零件信息</div>
			<div class="col-xs-12">
				<p class="border-line-1">{{details.partInfo}}</p>
			</div>
		</div>
		<div class="row line-h-30">
			<div class="col-xs-12" style='padding: 0;'>
				<p class="drivider-line-10"></p>
			</div>
			<div class="col-xs-12 fs-16">下次保养建议</div>
			<div class="col-xs-12">
				<p class="border-line-1">{{details.remark}}</p>
			</div>
		</div>
	</div>
	<!-- 在线评价 -->
	<!-- <div id="rhrcontent" class="tab-pane hidden">
	<img src="http://carowner.yonyouauto.com/fs01/ase/v1/images/GQ/d8.png" style="width:100%;" onclick="selectMaintainDealer(this)" >
	<div class="content-inner">
	<div class="row font-red">
	<div class="col-xs-5">工单号</div>
	<div class="col-xs-7">GD238493499349</div>
	<div class="col-xs-12">
	<p class="drivider-line-10"></p>
	</div>
	</div>
	</div>

	</div>
	-->

</div>
<script type="text/javascript">

var Gmccui = new Gmccui();
var apiUrl = [
	{"id":"maintenanceorder","url":"maintenanceorder"},//维修履历列表
	{"id":"orderDetail","url":"detail"}//维修履历明细
];

Gmccui.setHeaderMap({"Cookie":document.cookie});
Gmccui.setDomainUrl(getRootPath()+"/maintenanceorder/api/v1/");
//Gmccui.setDomainUrl("localhost:9005/maintenanceorder/api/v1/");
//Gmccui.setDomainUrl("http://10.180.4.161:9005/maintenanceorder/api/v1/");
Gmccui.setMutiApi(apiUrl);
$(function(){
var dealerCodes=localStorage.getItem('evaluate-dealerCode')
var maintenanceWorkOrderNums=localStorage.getItem('maintenanceNum');

if(maintenanceWorkOrderNums!==null&&dealerCodes!==null){
    let con={
        maintenanceWorkOrderNum:maintenanceWorkOrderNums,
        dealerCode:dealerCodes
    }
    rhdPageFn(con)
    $('#rhContent').css('display','none');
    $('#rhdcontent').removeClass('hidden');
}


})

var rhData = {
	"items":[],
	"carInfo":[],
	"details":{
		"maintenanceWorkOrderNum":"",
		"maintenanceWorkOrderType":"",
		"entryTime":"",
		"inMile":"",
		"dealerName":"",
		"completionDate":"",
		"expectedTime":"",
		"repairStatus":"",
		"partInfo":"",
		"projectInfo":"",
		"remark":""
	},
	'week':[],
	'imgurl':''
};
var  rootPath = getRootPath();
var rhApp = new Vue({
	el: '#rhApp',
	data: rhData,
	mounted:function(){
		// console.log(rootPath)
		this.getMaintenanceorder();
		// this.getOrderDetail();
	},
	methods:{
		getMaintenanceorder:function(){
			var _self = this;

			/* $.ajax({
				headers:{'Cookie':document.cookie},
				method:'get',
				url:rootPath+'/customer/api/v1/maintenanceorder',
				error:function(XMLHttpRequest, ajaxOptions, thrownError){
					console.log("数据刷新失败");
					_self.carInfo.modelName = 'sdm'
					_self.carInfo.licenseNo = 'zqj'
				},
				success:function(resultData){
					console.log('maintenanceorder')
					console.log(resultData)
				}
			}) */
		},
		press(index,raw){
		    localStorage.setItem('maintenanceNum',index);
            localStorage.setItem('hpp-dealerCode',raw);
		}
	}
});

Gmccui.getData("maintenanceorder",function(_callback){
	// console.log(JSON.stringify(_callback))
	// console.log('maintenenceOrder的长度:'+_callback.maintenenceOrder.length)
	//_self.items = [];	
	rhData.carInfo = [];
	for (var i = 0; i < _callback.maintenenceOrder.length; i++) {
		rhData.items.push( _callback.maintenenceOrder[i])
	};
	rhData.carInfo.push(_callback.carInfo);
	rhData.carInfo[0].imgurl = 'http://carowner.yonyouauto.com/fs01/carModel/BUICKakl.png'
	// console.log(JSON.stringify(_self.items)+'>>>>>>>>>>>>'+_self.items.length)

})
function getMyDay(date){
var week;
if(date.getDay()==0) week="天"
if(date.getDay()==1) week="一"
if(date.getDay()==2) week="二"
if(date.getDay()==3) week="三"
if(date.getDay()==4) week="四"
if(date.getDay()==5) week="五"
if(date.getDay()==6) week="六"
return week;
}
function tobeweek(timer){
	if($.type(timer) == "null"||$.type(timer) == "undefined"||$.type(timer) == "") return "";
	var c = new Date(timer.split('-')[0],parseInt(timer.split('-')[1]-1),timer.split('-')[2]).getDay(); 
	switch(c){
		case 1:
			return '一';
			break
		case 2:
			return '二';
			break
		case 3:
			return '三';
			break
		case 4:
			return '四';
			break
		case 5:
			return '五';
			break
		case 6:
			return '六';
			break
		case 7:
			return '日';
			break
	}
}
        // "vin":Gmccui.getQueryValue("vin")
/* Gmccui.getData("maintenanceorder",function(_callback){
	rhData.items = _callback["maintenenceOrder"];
	rhData.carInfo = _callback["carInfo"];
}) */
function rhdPageFn(item){
    //debugger
	Gmccui.getData("orderDetail",{"maintenanceWorkOrderNum":item["maintenanceWorkOrderNum"],"dealerCode":item["dealerCode"]},function(_callback){
	    rhData.details = $.extend(true,rhData.details,_callback[0]);
		console.log(JSON.stringify(rhApp.details))
	})
  }


</script>

</body>

</html>